<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/binge.css" />
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header"></div>
<div class="match-status bg-cover" style="background: url('../../image/bg-match-logo.png')">
    <!-- header -->
    <div class="header">
        <div class="head-back">
            <a href="javascript:void(0);" tapmode onclick="comeBack()" class="back-btn-white"></a>
        </div>
        <!--<div class="head-title" style="width: calc(100% - 1rem)">-->
            <!--<h6 style="color: #fff; font-size: 0.28rem;" class="t-l">高校足球赛1/8决赛</h6>-->
        <!--</div>-->
        <div class="head-action">
            <a href="javascript:void(0);" tapmode class="action-btn-ld"></a>
        </div>
    </div>
    <!-- header end -->

    <div class="match-battle">
        <div class="match-li">
            <div class="match-school">
                <div class="match-school-logo"><img src="../../image/school-logo01.png" alt=""></div>
                <p class="school-name">澳门大学</p>
            </div>
            <div class="match-detail">
                <p class="match-place single-ellipsis">09:30 10-21 体育馆</p>
                <h6 class="match-title multiline-ellipsis">足球杯1/8决赛</h6>
                <div class="match-num">12 - 14</div>
                <div class="play-status status1"><span>直播中</span></div>
            </div>
            <div class="match-school">
                <div class="match-school-logo"><img src="../../image/school-logo01.png" alt=""></div>
                <p class="school-name">东南大学</p>
            </div>
        </div>
    </div>

</div>


<div class="comment-section">
    <div class="comment-kinds">
        <ul>
            <li tapmode onclick="tabComment()" class="on"><span>全部评论</span></li>
        </ul>
        <div class="screen-btn" tapmode onclick="screen()">按热度</div>
    </div>
    <div class="comment-area">
        <div class="comment-list area">
            <ul>
                <li>
                    <div class="list-user-info">
                        <div class="user-img bg-cover" style="background-image: url('../../image/img-tx.png');"></div>
                        <p class="user-name">千三岁</p>
                        <dl class="badge-list ml5">
                            <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz02.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz03.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz04.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz05.png" alt=""></dd>
                        </dl>
                        <div class="fabulous on">5218</div>
                    </div>
                    <div class="list-detail">
                        <div class="detail">
                            <p>早晚要被机器人统治，嘎嘎...早晚要被机器人统治，嘎嘎...早晚要被机器人统治，嘎嘎...</p>
                        </div>
                        <div class="list-reply">
                            <div class="list-reply-ul">
                                <div class="list-reply-li">
                                    <div class="list-user-info">
                                        <p class="user-name">千三岁</p>
                                        <dl class="badge-list ml5">
                                            <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                                            <dd class="icon"><img src="../../icon/icon-hz02.png" alt=""></dd>
                                        </dl>
                                    </div>
                                    <div class="list-reply-detail">唉，走火入魔一个</div>
                                </div>
                                <div class="list-reply-li">
                                    <div class="list-user-info">
                                        <p class="user-name">千三岁</p>
                                        <dl class="badge-list ml5">
                                            <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                                            <dd class="icon"><img src="../../icon/icon-hz02.png" alt=""></dd>
                                        </dl>
                                    </div>
                                    <div class="list-reply-detail">
                                        <span>回复 <em class="c-primary">看不清</em>：</span>唉，走火入魔一个走火入魔一个走火入魔一个走火入魔一个
                                    </div>
                                </div>
                            </div>
                            <a href="javascript:void(0);" class="reply-count" tapmode onclick="commonUrl()">共241条回复 ></a>
                        </div>
                        <div class="list-flex">
                            <div class="list-time">
                                <span>1分钟前</span>
                                <a href="javascript:void(0);" tapmode onclick="commonUrl()" class="c-primary">回复</a>
                            </div>
                            <a href="javascript:void(0);" tapmode onclick="listAction()" class="list-action"></a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-user-info">
                        <div class="user-img bg-cover" style="background-image: url('../../image/img-tx.png');"></div>
                        <p class="user-name">千三岁</p>
                        <dl class="badge-list ml5">
                            <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz02.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz03.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz04.png" alt=""></dd>
                            <dd class="icon"><img src="../../icon/icon-hz05.png" alt=""></dd>
                        </dl>
                        <div class="fabulous on">5218</div>
                    </div>
                    <div class="list-detail">
                        <div class="detail">
                            <p>早晚要被机器人统治，嘎嘎...早晚要被机器人统治，嘎嘎...早晚要被机器人统治，嘎嘎...</p>
                        </div>
                        <div class="list-reply">
                            <div class="list-reply-ul">
                                <div class="list-reply-li">
                                    <div class="list-user-info">
                                        <p class="user-name">千三岁</p>
                                        <dl class="badge-list ml5">
                                            <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                                            <dd class="icon"><img src="../../icon/icon-hz02.png" alt=""></dd>
                                        </dl>
                                    </div>
                                    <div class="list-reply-detail">唉，走火入魔一个</div>
                                </div>
                                <div class="list-reply-li">
                                    <div class="list-user-info">
                                        <p class="user-name">千三岁</p>
                                        <dl class="badge-list ml5">
                                            <dd class="icon"><img src="../../icon/icon-hz01.png" alt=""></dd>
                                            <dd class="icon"><img src="../../icon/icon-hz02.png" alt=""></dd>
                                        </dl>
                                    </div>
                                    <div class="list-reply-detail">
                                        <span>回复 <em class="c-primary">看不清</em>：</span>唉，走火入魔一个走火入魔一个走火入魔一个走火入魔一个
                                    </div>
                                </div>
                            </div>
                            <a href="javascript:void(0);" class="reply-count" tapmode onclick="commonUrl()">共241条回复 ></a>
                        </div>
                        <div class="list-flex">
                            <div class="list-time">
                                <span>1分钟前</span>
                                <a href="javascript:void(0);" tapmode onclick="commonUrl()" class="c-primary">回复</a>
                            </div>
                            <a href="javascript:void(0);" tapmode onclick="listAction()" class="list-action"></a>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="comment-input">
                <div class="input-box">
                    <input type="text" placeholder="写评论...">
                    <button class="send-btn">确定</button>
                </div>
                <div class="comment-count">
                    <div class="count-li collect">1762</div>
                    <div class="count-li love">5218</div>
                    <div class="count-li msg">3027</div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 右上角操作 -->
<div class="action-model model">
    <div class="action-view">
        <h6>分享</h6>
        <a href="javascript:void(0);" class="model-close"></a>
        <div class="model-detail">
            <ul>
                <li>
                    <div class="share-icon icon1"></div>
                    <p>微信</p>
                </li>
                <li>
                    <div class="share-icon icon2"></div>
                    <p>朋友圈</p>
                </li>
                <li>
                    <div class="share-icon icon3"></div>
                    <p>QQ</p>
                </li>
                <li>
                    <div class="share-icon icon4"></div>
                    <p>QQ空间</p>
                </li>
                <li>
                    <div class="share-icon icon5"></div>
                    <p>微博</p>
                </li>
                <li>
                    <div class="share-icon icon-copy"></div>
                    <p>复制链接</p>
                </li>
                <li>
                    <div class="share-icon icon-report"></div>
                    <p>举报</p>
                </li>
            </ul>
        </div>
        <div class="shade-user">
            <a href="javascript:void(0);" class="shade-btn"><span>屏蔽此人</span></a>
        </div>
    </div>
</div>
<!-- 右上角操作 end -->


</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    apiready = function() {

        setFixStatusBar(); //设置状态栏
        pop.loading();

        keybackListener()




        api.parseTapmode();
    }

    var _model = $(".model");
    //开启弹窗
    _model.on('click',".action-btn",function () {
        _model.find('.action-view').animate({opacity: 0, bottom: '-100%'},500);
    });

    //触发事件 - 关闭弹窗
    _model.on('click',".model-detail ul li",function () {
        _model.find('.action-view').animate({opacity: 0, bottom: '-100%'},500);
    });

    //关闭弹窗 - 点击阴影处
    _model.click(function () {
        _model.find('.action-view').animate({opacity: 0, bottom: '-100%'},500);
    });
    //关闭弹窗 - 点击关闭按钮
    _model.on('click',".model-close",function () {
        _model.find('.action-view').animate({opacity: 0, bottom: '-100%'},500);
    });

    $(function () {
        $(".comment-kinds").on('click','li',function () {
            var _this = $(this);
            var _index = _this.index();
            _this.addClass('on').siblings('li').removeClass('on');
            $(".comment-area .area").eq(_index).show().siblings('.area').hide();
        })
    })



</script>
